<template>
    <div class="container">
       <div class="table-breadcrumb">
           <el-breadcrumb separator-class="el-icon-arrow-right">
               <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
               <el-breadcrumb-item>样板间征集</el-breadcrumb-item>
           </el-breadcrumb>
       </div>
	   <div style="margin: 20px;padding: 20px;background-color: #fff;">
		   <div style="margin-top: 20px;display: flex;align-items: center;flex-wrap: wrap;">
				 <div style="margin-right: 10px;font-size: 16px;">卖场:</div>
			     <el-select
			       v-model="market_id"
			       clearable
			       @change="selectMarket"
			       filterable
			       placeholder="全部"
			     >
			       <el-option
			         v-for="item in marketList"
			         :key="item.id"
			         :label="item.name"
			         :value="item.id"
			       >
			       </el-option>
			     </el-select>
				
			   
		       <div style="display: flex;align-items: center;margin-right: 40px;margin-left: 40px;">
		           <div style="margin-right: 10px;font-size: 16px;">添加时间</div>
		           <el-date-picker style="width: 420px;" @change="DataPickerChanege" v-model="DataTime" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
		           </el-date-picker>
		       </div>
		       <div style="display: flex;align-items: center;">
		           <el-input placeholder="请输入姓名/手机" style="width: 300px;" v-model="keyword" clearable @clear="clearInput"></el-input>
		           <el-button icon="el-icon-search" size="small" type="primary" style="margin-left: 10px;" @click="SearchList">搜索</el-button>
		       </div>
		   </div>
		   
		   <div style="margin: 20px;padding: 20px;background-color: #fff;">
		       <div style="margin-top: 20px;">
		           <Table :columns="listfields" :data-source="listData" :bordered="true" :pagination="false"></Table>
		           <pagination :total="total" v-model="page" :pageSize.sync="pagesize" :showQuickJumper="true" @change="handlePageChange" @onShowSizeChange="onShowSizeChange"></pagination>
		       </div>
		   </div>
	   </div>

    </div>
</template>
<script>
    import { mapGetters, mapState, mapActions } from 'vuex';
    import pagination from '@/common/pagination.vue'
    import Table from 'ant-design-vue/lib/table';
    import modal from 'ant-design-vue/lib/modal';
    import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    import 'ant-design-vue/lib/modal/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件
    export default {
        name: '',
        components: {
            pagination,
            Table,
            modal
        },
        data() {
            return {
				market_id: "", //卖场id
				marketList: [],
                listData: [],
                total: 0, //定义初始有多少条数据
				keyword: '',
				start_date:'',
				end_date:'',
                page: 1, //默认第几页
                pagesize: 10, //一页显示多少条数据
				DataTime: [], //时间选择器
            };
        },
        computed: {
			...mapState({
			    listfields: state => state.sample.fields,
			}),
        },
        watch: {},
        created() {},
        mounted() {
			this.GetFields()
			this.getList()
			this.remoteMethod();// 获取卖场列表
			
        },
        methods: {
			...mapActions({
			    GetFields: 'sample/GetFields',
			}),
			// 编辑
			EditItem(row) {
			    const id = row.id;
			},
			// 获取卖场列表
			remoteMethod() {
			  this.$http.post("/api/root/Market/marketList").then((res) => {
			    // console.log(res, "卖场列表");
			    if (res.code == 1) {
			      this.marketList = res.data ? res.data : [];
			    }
			  });
			},
			//获取数据
			getList() {
			    var that = this
			    var params = {
			        market_id: that.market_id,
			        keyword: that.keyword,
					start_date: that.start_date,
					end_date: that.end_date,
			        page: that.page,
			        pagesize: that.pagesize,
			    }
			    that.$http.post('api/root/SampleRoom/index', params).then(res => {
			        if (res.code === 1) {
			            that.total = res.data.total
			            let data = res.data.list
			            if (data.length > 0) {
			                data.forEach((item, index) => {
			                    item.key = item.id
								item.create_time = that.$moment(item.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss'); //时间戳转换成时间
			                })
			            }
			            that.listData = data
						console.log(that.listData);
			        } else {
			            that.$message.error(res.msg)
			        }
			    }).catch(err => {
			        that.$message.error(err.msg ? err.msg : err.toString())
			    })
			},
			DataPickerChanege(value) {
			    var that = this
			    // console.log(value);
			    if (value != null) {
			        that.start_date = value[0]
			        that.end_date = value[1]
			    } else {
			        that.start_date = ''
			        that.end_date = ''
			    }
			    that.getList()
			},
			// 清除搜索input
			clearInput(){
			  const that = this;
			  if(that.keyword == ''){
			    that.pageno = 1;
			    that.pagesize = 10;
			    that.getList()
			  }
			},
			// 搜索
			SearchList() {
			    var that = this
			    that.getList()
			},
			// 选择卖场
			selectMarket() {
			  this.selectPage = 1;
			  this.selectPagesize = 10;
			  // console.log(this.market_id)
			  this.getList();
			},
			// 分页
			handlePageChange(pageno, pagesize) { //点击第几页触发的函数
			    this.page = pageno;
			    this.pagesize = pagesize;
			    this.getList()
			},
			// 分页
			onShowSizeChange(current, size) { //改变每页显示条目数的函数
			    //pagesize 变化的回调
			    this.page = current;
			    this.pagesize = size;
			    this.getList()
			},
        },
    };
</script>
<style lang="less" scoped>
    .container {
        height: 100%;
        background-color: #f5f5f5;
    }
	.table-breadcrumb {
	    height: 6%;
	    min-height: 40px;
	    background-color: #fff;
	    display: flex;
	    align-items: center;
	    padding: 0 10px;
	}
	.table-content {
	    min-height: 70%;
	    height: auto;
	    margin: 20px 20px 0 20px;
	    padding: 10px;
	    background-color: #fff;
	
	    .table-bar {
	        margin-bottom: 10px;
	    }
	
	}
</style>